<!-- 播放视频 -->
<template>
	<view>
		<view class="pageBox">
			<view class="topBox">
				<view class="status_bar"></view>
			</view>
			<view class="centerBox">
				<view class="videoBox">
					<video :src="pageData.video_link" :controls="false" autoplay loop class="videoStyle"></video>
				</view>
				<view class="navBox">
					<zdynav fromval="video"></zdynav>
				</view>
				<view class="infoBox">
					<view class="left">
						<view class="row1">
							<navigator :url="`/pagesChat/userInfo?uid=${pageData.uid}`" class="row11">
								<image :src="pageData.avatar" mode="" class="img"></image>
								<view class="name">{{pageData.u_name}}</view>
							</navigator>
							<view class="btn">已关注</view>
						</view>
						<view class="row2" :class="{active:!isopen}">{{pageData.contents}}</view>
						<view class="row3">
							<navigator url="" class="row31">#生滚粥</navigator>
							<navigator url="" class="row31">#广州美食</navigator>
							<navigator url="" class="row31">#美食</navigator>
						</view>
						<view class="row4">
							<view class="leftRow4">编辑于 {{pageData.create_time}} {{pageData.ip_city}}</view>
							<view class="rightRow4" @click="isopen=!isopen">
								<view v-if="isopen">收起</view>
								<view v-else>展开</view>
							</view>
						</view>
					</view>
					<view class="right">
						<u-icon name="arrow-upward"></u-icon>
					</view>
				</view>
			</view>
			<view class="bottomBox">
				<detailBottom :objdata="objdata" @openpop="popShow=true"></detailBottom>
			</view>
		</view>
		<!-- 弹窗 -->
		<u-popup v-model="popShow" mode="bottom" closeable border-radius="30" height="80%">
			<view class="popStyle">
				<view class="title">共7条评论</view>
				<view class="pinglunBox">
					<scroll-view scroll-y="true" class="scrollStyle">
						<view style="padding-top:30rpx;">
							<pinglun></pinglun>
						</view>
					</scroll-view>
				</view>
				<view class="iptBox">
					<view class="ipt">说点什么吧~</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import api from '@/commonJS/api.js';
	import common from '@/commonJS/common.js';
	export default {
		data() {
			return {
				prevPageData: '', //上个页面传的参数
				pageData: '', //当前页面数据
				objdata: {}, //传给子组件对象
				isopen: false, //默认收起
				popShow: false, //弹窗显示隐藏
			}
		},
		onLoad(option) {
			console.log(option);
			this.prevPageData = option;
			this.getDetailFn();
		},
		methods: {
			// 获取详情
			getDetailFn() {
				const obj = {
					id: this.prevPageData.id
				}
				const _this = this;
				common.ajaxFn(api.index_detail, 'POST', obj).then((res) => {
					console.log('详情', res.data.data.trendsInfo);
					if (res) {
						_this.pageData = res.data.data.trendsInfo;
						_this.objdata = {
							type: 'video',
							likes_name: res.data.data.trendsInfo.likes_name,
							likes: res.data.data.trendsInfo.likes,
							collect_name: res.data.data.trendsInfo.collect_name,
							collect_num: res.data.data.trendsInfo.collect_num,
							comments_num: res.data.data.trendsInfo.comments_num
						}
					}
				});
			},
			// 去个人中心
			goPersonalCenter() {
				uni.navigateTo({
					url: `/pagesChat/userInfo?uid=${this.pageData.uid}`
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pageBox {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		display: grid;
		grid-template-rows: auto 1fr auto;

		.topBox {
			.status_bar {
				height: var(--status-bar-height);
				width: 100%;
			}
		}

		.centerBox {
			position: relative;

			.videoBox {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;

				.videoStyle {
					width: 100%;
					height: 100%;
				}
			}

			.navBox {
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}

			.infoBox {
				padding: 0 30rpx 30rpx 30rpx;
				width: 100%;
				position: absolute;
				left: 0;
				bottom: 0;
				display: grid;
				grid-template-columns: 1fr auto;
				column-gap: 30rpx;

				.left {
					.row1 {
						display: flex;
						align-items: center;

						.row11 {
							display: flex;
							align-items: center;

							.img {
								display: block;
								width: 70rpx;
								height: 70rpx;
								border-radius: 50%;
							}

							.name {
								margin-left: 20rpx;
								color: #fff;
								font-size: $font-saner;
								font-weight: bold;
							}
						}

						.btn {
							margin-left: 30rpx;
							width: 106rpx;
							height: 46rpx;
							border: 1px solid #fff;
							border-radius: 23rpx;
							color: #fff;
							font-size: $font-ersi;
							font-weight: bold;
							text-align: center;
							line-height: 42rpx;
						}
					}

					.row2 {
						margin-top: 20rpx;
						color: #fff;
						font-size: $font-erba;
					}

					.active {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.row3 {
						margin-top: 10rpx;
						display: flex;

						.row31 {
							margin-right: 20rpx;
							color: #B4CEFF;
							font-size: $font-sanshi;
						}
					}

					.row4 {
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: baseline;

						.leftRow4 {
							color: $gray-nine;
							font-size: $font-erer;
						}

						.rightRow4 {
							color: #fff;
							font-size: $font-erba;
							font-weight: bold;
						}
					}
				}

				.right {
					display: flex;
					align-items: flex-end;
				}
			}
		}

		.bottomBox {}
	}

	// 弹窗
	.popStyle {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: grid;
		grid-template-rows: auto 1fr auto;

		.title {
			height: 100rpx;
			border-bottom: 1px solid #E9E9E9;
			color: $gray-three;
			font-size: $font-erba;
			font-weight: bold;
			text-align: center;
			line-height: 100rpx;
		}

		.pinglunBox {
			position: relative;

			.scrollStyle {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
			}
		}

		.iptBox {
			padding: 0 30rpx;
			height: 106rpx;
			display: grid;
			grid-template-columns: 1fr auto;
			column-gap: 30;
			align-items: center;

			.ipt {
				padding-left: 30rpx;
				height: 70rpx;
				background-color: #eee;
				border-radius: 35rpx;
				color: $gray-six;
				font-size: $font-erba;
				line-height: 70rpx;
			}
		}
	}
</style>